<script setup>
const products = ref([
  {
    cate: "智能球阀",
    name: "OHT9300B 智能型 4G 远控球阀",
    id: "xx",
  },
  {
    cate: "智能球阀",
    name: "OHT9300B 智能型 4G 远控球阀",
    id: "cc",
  },
  {
    cate: "智能球阀",
    name: "OHT9300B 智能型 4G 远控球阀",
    id: "vv",
  },
  {
    cate: "智能球阀",
    name: "OHT9300B 智能型 4G 远控球阀",
    id: "bb",
  },
  {
    cate: "智能球阀",
    name: "OHT9300B 智能型 4G 远控球阀",
    id: "nn",
  },
  {
    cate: "智能球阀",
    name: "OHT9300B 智能型 4G 远控球阀",
    id: "mm",
  },
])

const banners = ref([
  { title: "为你铸就", img: "https://picsum.photos/1800/400" },
  // { title: "img", img: "https://picsum.photos/1800/400" },
  // { title: "img", img: "https://picsum.photos/1800/400" },
  // { title: "img", img: "https://picsum.photos/1800/400" },
  // { title: "img", img: "https://picsum.photos/1800/400" },
])

const contentList = ref([
  {
    title: '租赁产品',
    des: 'Cat 产品 租赁不仅能够带给您高性能和高效生产力，还能够满足您对每一项工作灵活性的要求。',
    img: 'https://picsum.photos/500/300?index=1',
    btn: '学到更多',
    btnLink: 'www.baidu.com',
    id: '1234'
  },
  {
    title: '购买产品',
    des: 'Cat 产品 租赁不仅能够带给您高性能和高效生产力，还能够满足您对每一项工作灵活性的要求。',
    img: 'https://picsum.photos/500/300?index=2',
    btn: '学到更多',
    btnLink: 'www.baidu.com',
    id: '1234'
  },
  {
    title: '购买产品',
    des: 'Cat 产品 租赁不仅能够带给您高性能和高效生产力，还能够满足您对每一项工作灵活性的要求。',
    img: 'https://picsum.photos/500/300?index=2',
    btn: '学到更多',
    btnLink: 'www.baidu.com',
    id: '1234'
  },
  {
    title: '购买产品',
    des: 'Cat 产品 租赁不仅能够带给您高性能和高效生产力，还能够满足您对每一项工作灵活性的要求。',
    img: 'https://picsum.photos/500/300?index=2',
    btn: '学到更多',
    btnLink: 'www.baidu.com',
    id: '1234'
  }
])
</script>
<template>
  <div class="w-full h-full flex justify-center items-center flex-col">
    <div class="w-full h-[35rem]">
      <el-carousel height="35rem" :indicator-position="'none'" arrow="never">
        <el-carousel-item v-for="(item, index) in banners" :key="item">
          <div class="flex justify-center relative h-full">
            <div
              class="absolute w-full h-full bg-black/50 text-[3rem] flex items-start justify-center pl-[20rem] lg:pl-[28rem] flex-col">
              <p
                class="m-0 color-[#fff] font-bold relative after:absolute after:left-0 after:bottom-0 after:content-[''] after:w-1/4 after:h-1 after:bg-[#ffcd11] text-left">
                {{ item.title }}
              </p>
              <!-- <p class="text-3 color-[#fff]">
              有工作要完成？我们全力支持您。从全球最大、经验最丰富的代理商网络获取支持。
            </p> -->
            </div>
            <div>
              <img class="w-full h-full object-cover" :src="item.img + `?index=${index}`" alt="" />
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="w-3/5 h-[10rem] pt-[3rem] pb-[10rem]">
      <p
        class="m-0 text-[3rem] font-bold inline-block relative after:absolute after:left-0 after:bottom-0 after:content-[''] after:w-1/4 after:h-1 after:bg-[#ffcd11] text-left">
        产品
      </p>
      <p class="text-[1.2rem] mt-2">
        Cat 产品 系列包括 300 多款机械设备，树立了业界标准。
        通过Cat®（卡特）的机械设备、产品分销与支持体系以及持续推出与更新的众多
        Cat 产品 ，我们定可满足您的需求。
      </p>
    </div>
    <el-space class="w-3/5 pt-[3rem] pb-[5rem]" alignment="center" :size="25" wrap :fill="true" :fill-ratio="30">
      <NuxtLink v-for="item in products" :key="item.id" :to="`/product/${item.id}`"
        class="hover:text-primary-600 dark:text-primary-200">
        <el-card shadow="hover" class="group cursor-pointer">
          <img class="group-hover:scale-110 transition-all duration-500"
            src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
            style="width: 100%" />
          <template #footer>
            <p class="color-gray-500 pb-2">{{ item.cate }}</p>
            <p class="text-xl font-bold">{{ item.name }}</p>
          </template>
        </el-card>
      </NuxtLink>
    </el-space>
    <div class="w-full bg-[#f8f8f8] flex justify-center items-center">
      <div class="w-3/5 pt-[3.5rem] pb-[3.5rem]">
        <el-row :class="`${index % 2 == 0 ? '' : 'flex-row-reverse'}`" v-for="(item, index) in contentList"
          :key="item.title">
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" class="p-[5rem] bg-[#fff]">
            <p
              class="m-0 text-[3rem] font-bold inline-block relative after:absolute after:left-0 after:bottom-0 after:content-[''] after:w-1/4 after:h-1 after:bg-[#ffcd11] text-left">
              {{ item.title }}
            </p>
            <p class="text-[1.2rem] mt-2">
              {{ item.des }}
            </p>
            <div class="pt-[1rem] flex justify-end">
              <el-button type="warning">{{ item.btn }}</el-button>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
            <img class="w-full" :src="`${item.img}?index=${item.index}`" alt="" srcset="" />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
